<template>
  <div class="search-songs">
    <album-content :songList="listOfSongs"></album-content>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {mixin} from '../../mixins'
import AlbumContent from '../AlbumContent'
import axios from 'axios'

export default {
  name: 'search-songs',
  data() {
    return {
      listOfSongs: []
    }
  },
  computed: {
    ...mapGetters([
      // 'listOfSongs', // 存放的音乐
      'searchword'
    ])
  },
  components: {
    AlbumContent
  },
  watch: {
    searchword: function () {
      this.getSongs()
    }
  },
  methods: {
    getSongs() {
      console.log("this.listOfSongs")
      console.log(this.listOfSongs)
      if (this.searchword){
        axios.get(this.$store.state.HOST + "/song/search/Songs?name=" + this.searchword)
          .then(resp=> {
            // this.$store.commit('setListOfSongs', resp.data)
            // window.sessionStorage.setItem("listOfSongs",JSON.stringify(resp.data))
            this.listOfSongs = resp.data
          }).catch(()=>{
          // this.$store.commit('setListOfSongs', [])
          // window.sessionStorage.setItem("listOfSongs",JSON.stringify([]))
          this.listOfSongs = []
        })
      }
    }
  },
  created() {
    this.getSongs()
  },
  mixins: [mixin]
}
</script>

<style scoped>
  .search-songs{
    min-height: 300px;
  }
</style>
